<template>
  <div class="app-container">
    <div class="switch">
      <el-row>
        <el-col :span="4" :offset="2"><el-switch
          v-model="edit"
          active-text="编辑"
          inactive-text="预览">
        </el-switch></el-col>
      </el-row>
    </div>
    <div class="form">
      <el-form ref="form" :model="form" label-width="200px" size="small">
        <el-form-item label="Activity userId" size="medium">
          <el-col :span="8"><el-input v-model="form.userId" :disabled="true"/></el-col>
        </el-form-item>
        <el-form-item label="Activity name" size="medium">
          <el-col :span="8"><el-input v-model="form.userName" :disabled="!edit"/></el-col>
        </el-form-item>
        <el-form-item label="Activity userPassword" size="medium">
          <el-col :span="8"><el-input v-model="form.userPassword" :disabled="!edit"/></el-col>
        </el-form-item>
        <el-form-item label="Activity token" >
          <el-col :span="8"><el-input v-model="token" :disabled="true" size="medium"/></el-col>
        </el-form-item>
        <el-form-item label="Activity avatar">
          <el-col :span="12"><el-input v-model="form.avatar" size="medium" :disabled="!edit"/></el-col>
        </el-form-item>
        <el-form-item label="Activity userInfo introduction">
          <el-col :span="12"><el-input v-model="userInfo.introduction" size="medium"/></el-col>
        </el-form-item>
        <el-form-item label="Activity token">
          <el-col :span="12"><el-input v-model="token" size="medium"/></el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <span>-----------------</span>
    <div v-bind:key="index" v-for="(value, name, index) in userInfo">
      {{ index }}. {{ name }}: {{ value }}
    </div>
    <span>-------123----------</span>
    <div v-bind:key="index" v-for="(value, name, index) in form">
      {{ index }}. {{ name }}: {{ value }}
    </div>
    <span>{{edit}}</span>

  </div>

</template>

<script>
import { mapGetters } from 'vuex'
export default {

  computed: {
    ...mapGetters([
      'name',
      'token',
      'userInfo'
    ])
  },
  data() {
    return {
      form: {
      },
      edit: false
    }
  },
  mounted() {
  },
  methods: {
    onSubmit() {
      this.$store.dispatch('user/edit', this.form).then(() => {
        this.$message('submit success')
      }).catch(() => {
        this.$message('submit error')
      })
    }
  },
  watch: {
    userInfo: {
      handler: function(val, oldVal) {
        this.form = val
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style scoped>
  .line{
    text-align: center;
  }
  .switch{
    padding: 50px 0 20px 0;
  }
</style>

